.card-comment {
  border-radius: 0.25rem;
  border: 1px solid var(--extra-white-gray-color);
  textarea {
    border: none;

    &:focus {
      border: none;
      box-shadow: none;
    }
  }
  .card-footer {
    border-top: 1px solid var(--extra-white-gray-color);
    padding: 0.75rem 1.25rem;
    background-color: var(--white-gray-color);
    display: flex;
    align-items: center;
    gap: 8px;
    .avatar {
      height: 30px;
      width: 30px;
      border-radius: 50%;
      object-fit: cover;
    }

    .author {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    .author {
      color: var(--green-color);
    }

    .date {
      font-size: 12.8px;
      color: var(--gray-color);
      margin-bottom: 0;
    }

    .delete-btn {
      margin-left: auto;
      cursor: pointer;
      color: var(--extra-white-gray-color);

      &:hover {
        color: var(--extra-gray-color);
      }
    }
  }
}

.comment-list {
  display: flex;
  margin-top: 14px;
  flex-direction: column;
  gap: 14px;
}
